<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@include file="/sunzbase.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>分类管理</title>
<style type="text/css">
.table td{
	text-align: center;
}
u{
	text-decoration: none;
}
u:hover {
	color: red; 
	text-decoration:underline;
} 
</style>
</head>
<body>
<nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页
	<span class="c-gray en">&gt;</span>
	系统管理
	<span class="c-gray en">&gt;</span>
	分类管理
	<a class="btn btn-success radius r" id="refresh" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" ><i class="Hui-iconfont">&#xe68f;</i></a>
</nav>
<div class="page-container">
	<form id="searchForm">
		<div class="text-c">
			<input type="text" name="tagName" id="tagName" placeholder="类别名称" style="width:250px" class="input-text">
			<button name="" type="button" id="btnSearch" class="btn btn-success"><i class="Hui-iconfont">&#xe665;</i> 搜索</button>
		</div>
	</form>
	<div class="cl pd-5 bg-1 bk-gray mt-20">
		<span class="l">
		<a href="javascript:;" onclick="datadel()" class="btn btn-danger radius"><i class="Hui-iconfont">&#xe6e2;</i> 批量删除</a>
		<a class="btn btn-primary radius" onclick="system_category_add('添加分类','note/classAdd')" href="javascript:;"><i class="Hui-iconfont">&#xe600;</i> 添加分类</a>
		</span>
	</div>
	<div class="mt-20">
		<table class="table table-border table-bordered table-hover table-bg table-sort" width=100% >
			<thead>
				<tr class="text-c">
					<th width="25"><input type="checkbox" name="" id="allChk" value=""></th>
					<th width="80">ID</th>
					<th width="80">排序</th>
					<th>分类名称</th>
					<th width="100">操作</th>
				</tr>
			</thead>
			<tbody>
				<tr class="text-c">
					<td><input type="checkbox" name="" value=""></td>
					<td>1</td>
					<td>1</td>
					<td class="text-l">一级栏目</td>
					<td class="f-14"><a title="编辑" href="javascript:;" onclick="system_category_edit('分类编辑','note/classAdd','1','800','480')" style="text-decoration:none"><i class="Hui-iconfont">&#xe6df;</i></a>
						<a title="删除" href="javascript:;" onclick="system_category_del(this,'1')" class="ml-5" style="text-decoration:none"><i class="Hui-iconfont">&#xe6e2;</i></a></td>
				</tr>
			</tbody>
		</table>
	</div>
</div>

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="resources/lib/My97DatePicker/4.8/WdatePicker.js"></script>
<script type="text/javascript" src="resources/lib/datatables/1.10.0/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="resources/lib/laypage/1.2/laypage.js"></script>
<script type="text/javascript">
$('.table-sort').DataTable({
	"aaSorting": [[ 1, "desc" ]],//默认第几个排序
	"bStateSave": true,//状态保存
	"bServerSide":true, //服务器端分页
	"paging": true,
	"searching":true,
	"aoColumnDefs": [
	  //{"bVisible": false, "aTargets": [ 3 ]} //控制列的隐藏显示
	  {"orderable":false,"aTargets":[0,3,4]}// 制定列不参与排序
	],
	   ajax:{  
	       url:"note/classList",  
	       type:'post',  
	       data:$("#searchForm").serialize()
	   },
	 columns:[
 	  { "data": null, width: '10%',"render":function(data,type,full,meta){
 		  return '<input type="checkbox" onclick="check()" name="items" value="'+data.id+'">';
 		  } }, 
   	  { "data": null, width: '10%',defaultContent: ""},   
   	  { "data": "sequence", width: '10%' },  
   	  { "data": "tagName" },
   	  {"data":null , width: '10%',"render": function ( data, type, full, meta ) {
   	     /*  return   | <a style="cursor:pointer;" name="'+data.userid+'">删除</a>'; */
   	      return '<a title="编辑" href="javascript:;" onclick="system_category_edit(\'分类编辑\',\'note/classAdd?classID='+data.id+'\','+data.id+',\'800\',\'480\')" style="text-decoration:none"><i class="Hui-iconfont">&#xe6df;</i></a><a title="删除" href="javascript:;" onclick="system_category_del(this,'+data.id+')" class="ml-5" style="text-decoration:none"><i class="Hui-iconfont">&#xe6e2;</i></a>';
   	      }
   	  }
   ],
   fnDrawCallback : function () {
       let api = this.api();
       api.column(1).nodes().each(function(cell, i) {
           cell.innerHTML = i + 1;
       });
   }
/*    'treeGrid': {
       'left': 10,
       'expandIcon': '<span>+</span>',
       'collapseIcon': '<span>-</span>'
   } */
});

$("#allChk").click(function(){
	if(this.checked){
		$("input[name='items']:checkbox").each(function(){
			$(this).attr("checked",true);
		})
	}else{
		$("input[name='items']:checkbox").each(function(){
			$(this).attr("checked",false);
		})
	}
});
		function check(){	
			if($(":checkbox[name='items']").length==$(":checkbox[name='items']:checked").length){
				 $("#allChk").prop("checked",true);
			} else{
				 $("#allChk").prop("checked",false);
			}
		};
 function datadel(){
	 var ids=[];
	 if($("input[name='items']:checked").length>0){
		 $("input[name='items']:checked").each(function(){ 
	         ids.push($(this).attr("value"));  
		 })
	 }else{
		 layer.alert("请先选择删除项！");
		 return false;
	 }
		var delIds=ids.join(","); 
		console.log(delIds);
		$.ajax({
			type: 'POST',
			url: 'note/classDel',
			data:{classId:delIds},
			dataType: 'json',
			success: function(data){
				if(data.success){
					layer.msg('已删除!',{icon:1,time:1000});
					$('#btnSearch').click();					
					$(obj).parents("tr").remove();					
				}else{
					layer.msg('删除失败!',{icon:1,time:1000});
				}
			},
			error:function(data) {
				console.log(data.msg);
			}
		});
 }
/*系统-分类-搜索*/
$("#btnSearch").on("click",function(){
	debugger;
	var className=$("#tagName").val();
		 var datatable= $('.table-sort').DataTable();
   		 datatable.settings()[0].ajax.data = {tagName:className};
		 datatable.ajax.reload();
})
/*系统-分类-添加*/
function system_category_add(title,url,w,h){
	layer_show(title,url,w,h);
}
/*系统-分类-编辑*/
function system_category_edit(title,url,id,w,h){
	layer_show(title,url,w,h);
}
/*系统-分类-删除*/
function system_category_del(obj,id){
	layer.confirm('确认要删除吗？',function(index){
		$.ajax({
			type: 'POST',
			url: 'note/classDel',
			data:{classId:id},
			dataType: 'json',
			success: function(data){
				if(data.success){
					$('#btnSearch').click();
					$(obj).parents("tr").remove();
					layer.msg('已删除!',{icon:1,time:1000});
				}else{
					layer.msg('删除失败!',{icon:1,time:1000});
				}
			},
			error:function(data) {
				console.log(data.msg);
			}
		});
	});
}
</script>
</body>
</html>